<template>
    <div class='header_top'>
        <div class="content_top">
            <div class="content_left">
                <el-radio-group v-model="direction">
                    <el-radio label="ltr" >点我</el-radio>
                </el-radio-group>
                <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
                    打开
                </el-button>
                <el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
                    <span>我来啦!</span>
                </el-drawer>
            </div>
            <div class="content_right">
                <div class="nav_left">
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                            语言<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="zh">中文</el-dropdown-item>
                            <el-dropdown-item command="en">英文</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="nav_content">历史记录</div>
                <div class="nav_right">
                    <el-dropdown @command="headrquit">
                        <span class="el-dropdown-link">
                            登录<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="0">退出登录</el-dropdown-item>
                            <el-dropdown-item command="1">修改密码</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            // kuList: [1, 2, 3, 4, 5],
            drawer: false,
            direction: 'rtl',
            radio:1,
        }
    },
    computed: {},
    watch: {},
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        handleCommand(command) {
            if (command == "zh") {
                this.$message({
                    message: '切换成功',
                    type: 'success'
                });
            } else {
                this.$message({
                    message: '切换成功',
                    type: 'success'
                });
            }
            // console.log(command, "command");
            // this.$message('切换成功' + command);
        },
        headrquit(e) {
            if (e == "0") {
                this.$message({
                    message: '退出登录',
                    type: 'success'
                });
                this.$router.push('/')
            } else {

                this.$message({
                    message: '修改密码',
                    type: 'success'
                });
            }
        }

    },
    created() {

    },
    mounted() {

    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
.header_top {
    width: 100%;

    .content_top {
        width: 95%;
        height: 50px;
        line-height: 50px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        .content_right {
            width: 20%;
            display: flex;
            place-content: space-between;

            // .el-dropdown-link {
            //     cursor: pointer;
            //     color: #409EFF;
            // }

            .el-icon-arrow-down {
                font-size: 16px;
            }
        }

        .content_right :hover {
            height: 50px;
            text-align: center;
            // background-color: #EDF5FE;
            color: #55A1FB;
        }
    }
}

.el-dropdown {
    color: #000 !important;
    font-size: 16px !important;
}

.active {
    color: red;
}
/deep/.el-button--primary{
    box-shadow: 0 0 5px !important;
    color: #000 !important;
    background: #fff !important;
}
</style>